<template>
	<view class="container">
		<!-- 背景 -->
		<view class="bg">
			<!-- tab -->
			<view class="tab">
				<image src="https://ipfs.s11edao.com/ipfs/QmYHyFTMaWpZnTobYJZFMSSDgtm4HnHqEHp4KCQrTA3y4n" mode="" class="tab-bg"></image>
				<view class="tab-row">
					<view class="login-title" style="margin-right: 40rpx;" @click="cur = 0">
						<text style="margin-bottom: 20rpx; font-size: 40rpx;"
							:class="[cur ? 'color-black-3': 'color-base']">登录</text>
						<view class="under_line" v-if="!cur"></view>
					</view>
					<view class="register-title" @click="cur = 1">
						<text style="margin-bottom: 20rpx; font-size: 40rpx;"
							:class="[cur ? 'color-base': 'color-black-3']">注册</text>
						<view class="under_line" v-if="cur"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-container">
			<!-- 填写内容 -->
			<view class="login-register-content">
				<view class="input-box">
					<image class="input-box-icon" src="../../static/images/login/account.png" mode=""></image>
					<input type="text" v-model="username" value="" :maxlength="11" placeholder="请输入您的用户名"
						class="input-box-text" placeholder-class="input-box-placeholder" />
				</view>
				<view v-if="cur" class="input-box">
					<image class="input-box-icon" src="../../static/images/login/account.png" mode=""></image>
					<input type="text" v-model="phone" value="" :maxlength="11" placeholder="请输入您的手机号/邮箱"
						class="input-box-text" placeholder-class="input-box-placeholder" />
				</view>
				<view class="input-box">
					<image class="input-box-icon" src="../../static/images/login/password.png" mode=""></image>
					<input type="password" v-model="password" value="" :maxlength="11" placeholder="请输入您的登录密码"
						class="input-box-text" placeholder-class="input-box-placeholder" />
				</view>
			</view>
			<!-- 按钮 -->
			<view v-if="cur" class="button" @click="handleRegister">
				<text>立即注册</text>
			</view>
			<view v-else class="button" @click="handleLogin">
				<text>立即登录</text>
			</view>
			<!-- 忘记密码 -->
			<view class="forget">
				<text>忘记密码？</text>
			</view>
			<!-- 更多登陆方式 -->
			<view class="other">
				<view class="other-title">
					<view class="separator"></view>
					<text>更多登录方式</text>
					<view class="separator"></view>
				</view>
				<view class="other-items">
					<image src="../../static/images/login/wechat.png" mode="" class="other-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		login,
		register
	} from '@/config/customer.js';

	import {
		hex_md5
	} from '@/utils/md5';

	export default {
		data() {
			return {
				// 当前的下标
				cur: 0,
				username: '', //用户/电话
				password: '', //密码
				phone: ''
			}
		},
		methods: {
			handleRegister() {
				let reg = /0?(13|14|15|18|17)[0-9]{9}/

				if (this.username == '') {
					uni.$u.toast('用户名不能为空');
				} else if (this.password == '') {
					uni.$u.toast('密码不能为空');
				} else if (this.phone == '') {
					uni.$u.toast('手机号不能为空');
				} else {
					if (reg.test(this.phone)) {
						register({
							phone: this.phone,
							username: this.username,
							password: hex_md5(this.password),
						}).then(res => {
							console.log(res)

							if (res)
								uni.navigateTo({
									url: '/pages/Login/Login'
								})
						})
					} else {
						uni.$u.toast('请输入正确的手机号');
					}

				}

			},
			handleLogin() {
				if (this.username == '' || this.password == '') {
					uni.$u.toast('账号或者密码不能为空');
				} else {
					login({
						username: this.username,
						password: hex_md5(this.password)
					}).then(res => {
						console.log(res)
						if (res)
							// 存储需要的用户信息
							uni.setStorageSync('customerInfo', res.data.customerInfo);
						uni.setStorageSync('customerDaos', res.data.customerDaos);
						uni.setStorageSync('token', res.data.token);
						// 跳转到tabbar页面只能使用这个
						uni.switchTab({
							url: '/pages/My/My'
						});
					})
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: relative;

		.bg {
			position: relative;
			width: 750rpx;
			height: 500rpx;
			background-color: $echo-main-color;
			margin-bottom: 80rpx;
		}

		.tab {
			position: absolute;
			bottom: -1rpx;
			left: 20rpx;
			right: 20rpx;
			height: 150rpx;
			padding: 0 50rpx;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			display: flex;
			align-items: center;

			// 图片
			&-bg {
				position: absolute;
				top: -260rpx;
				right: -20rpx;
				width: 440rpx;
				height: 360rpx;
			}

			&-row {
				display: flex;
				font-size: 50rpx;

				.under_line {
					background-color: $echo-main-color;
					width: 25rpx;
					height: 7rpx;
				}
			}

			.login-title,
			.register-title {
				display: flex;
				flex-direction: column;
				align-items: center;

				.color-base {
					color: $echo-main-color;
				}

				.color-black-3 {
					color: #333;
				}
			}
		}

		.bottom-container {
			padding: 0 60rpx;
		}

		// 登陆注册内容
		.login-register-content {

			.input-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;
				padding: 0 30rpx;
				background-color: rgba(80, 100, 235, 0.1);
				border-radius: 60rpx;
				margin-bottom: 60rpx;

				&-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}

				&-text {
					flex: 1;
				}

				&-placeholder {
					color: $echo-main-color;

				}
			}
		}

		// 按钮
		.button {
			width: 630rpx;
			height: 90rpx;
			margin: 0 auto;
			border-radius: 100rpx;
			background-color: $echo-main-color;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 34rpx;
		}

		// 忘记密码
		.forget {
			margin-top: 30rpx;
			color: $echo-main-color;
			text-align: center;
		}

		// 其他
		.other {
			margin-top: 100rpx;

			&-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.separator {
					height: 2rpx;
					width: 200rpx;
					background-color: #f5f5f5;
				}

			}

			&-items {
				display: flex;
				justify-content: center;

				.other-icon {
					width: 50rpx;
					height: 50rpx;
					padding: 0 20rpx;
				}
			}
		}
	}
</style>
